<template>

  <div>

    <el-dialog :close-on-click-modal="false" :visible.sync="dialogVisible" title="字典项" width="500px">

      <el-form ref="postForm" :model="postForm" :rules="rules" label-position="left" label-width="100px">

        <el-form-item label="名称" prop="title">
          <el-input v-model="postForm.title" size="small" placeholder="显示的名称" />
        </el-form-item>

        <el-form-item v-if="dicType===1" label="数据值" prop="dicValue">
          <el-input v-model="postForm.dicValue" :disabled="!!postForm.id" size="small" placeholder="编程引用的值" />
        </el-form-item>

        <el-form-item label="描述">
          <el-input v-model="postForm.remark" size="small" />
        </el-form-item>

      </el-form>

      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSave">确 定</el-button>
      </div>

    </el-dialog>

    <el-drawer
      :wrapper-closable="false"
      :visible.sync="drawerVisible"
      title=" "
      size="40%"
      @close="drawerClose"
    >

      <div style="padding: 0 10px">

        <data-table
          ref="dataTable"
          :options="options"
          :list-query="listQuery"
          @add="showAddDialog({parentId: '0'})">
          <template #filter-content>
            <el-input v-model="listQuery.params.title" size="small" placeholder="搜索字典名称" style="width: 200px;" class="filter-item" />
          </template>

          <template #data-columns>

            <el-table-column label="名称" prop="title" />

            <el-table-column v-if="dicType!==2" label="字典值" prop="dicValue" align="center" />

            <el-table-column align="center" label="操作" width="150px">
              <template v-slot="scope">
                <el-button v-if="dicType===2" title="添加下级" size="mini" icon="el-icon-plus" circle @click="showAddDialog(scope.row)" />
                <el-button title="编辑" size="mini" icon="el-icon-edit" circle @click="showEditDialog(scope.row)" />
                <el-button title="删除" size="mini" icon="el-icon-delete" circle @click="handleDelete(scope.row.id)" />
              </template>
            </el-table-column>
          </template>
        </data-table>
      </div>
    </el-drawer>

  </div>

</template>

<script>
import { saveValue, deleteValue } from '@/api/sys/dict/value'
import KeyPointTreeSelect from '@/components/KeyPointTreeSelect/index.vue'

export default {
  name: 'SysDicValue',
  components: { KeyPointTreeSelect },
  props: {
    drawer: Boolean,
    dicCode: String,
    dicType: Number
  },
  data() {
    return {

      drawerVisible: false,
      // 字典值相关
      dialogVisible: false,
      postForm: {
        dicCode: '',
        id: '',
        parentId: '',
        title: '',
        remark: ''
      },
      rules: {
        title: [
          { required: true, message: '名称不能为空！' }
        ],
        dicValue: [
          { required: true, message: '数据值不能为空！' }
        ]
      },

      listQuery: {
        current: 1,
        size: 10,
        params: {
          title: '',
          dicCode: ''
        }
      },

      options: {

        add: {
          enable: true,
          permission: 'sys:dict:catalog:add'
        },
        edit: {
          enable: false,
          permission: 'sys:dict:catalog:update'
        },
        delete: {
          enable: false,
          permission: 'sys:dict:catalog:delete',
          url: '/api/sys/dic/delete'
        },

        // 列表请求URL
        listUrl: '/api/sys/dic/value/tree-paging'
      }
    }
  },

  watch: {

    dicCode() {
      this.listQuery.params.dicCode = this.dicCode
      this.postForm.dicCode = this.dicCode
    },

    drawer() {
      this.drawerVisible = this.drawer
    }
  },

  created() {
    this.listQuery.params.dicCode = this.dicCode
    this.postForm.dicCode = this.dicCode
  },

  methods: {

    drawerClose() {
      this.$emit('close')
    },

    showAddDialog(item) {
      this.postForm = { parentId: item.id, dicCode: this.dicCode }
      this.dialogVisible = true
    },

    showEditDialog(item) {
      this.postForm = item
      this.dialogVisible = true
    },

    handleSave() {
      this.$refs.postForm.validate((valid) => {
        if (!valid) {
          return
        }
        saveValue(this.postForm).then(() => {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.dialogVisible = false
          this.$refs.dataTable.getList()
          // 清理本地缓存
          localStorage.clear()
        })
      })
    },
    handleDelete(id) {
      this.$confirm('确实要删除吗', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteValue({ ids: [id] }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.dialogVisible = false
          this.$refs.dataTable.getList()
          // 清理本地缓存
          localStorage.clear()
        })
      })
    }

  }
}
</script>

<style scoped>

  ::v-deep .el-drawer__header{
    margin-bottom: 0;
    padding: 10px;
  }
</style>
